<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Element Tree 示例</title>
    <!-- 1. 引入 Vue 2.6.14（Element UI 2.x 唯一兼容版本） -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 2. 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
    <!-- 3. 引入 Element UI 核心脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>
</head>
<body>
<!-- 4. 挂载容器（必须有） -->
<div id="app" style="margin: 20px;">
    <!-- 5. el-tree 组件 -->
    <el-tree
            :data="data()"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps">
    </el-tree>
</div>

<script>
    // 6. 初始化 Vue 实例
    new Vue({
        el: '#app', // 绑定到容器
        data() {
            return {
                data: [{
                    id: 1,
                    label: '一级 2',
                    children: [{
                        id: 3,
                        label: '二级 2-1',
                        children: [{
                            id: 4,
                            label: '三级 3-1-1'
                        }, {
                            id: 5,
                            label: '三级 3-1-2',
                            disabled: true
                        }]
                    }, {
                        id: 2,
                        label: '二级 2-2',
                        disabled: true,
                        children: [{
                            id: 6,
                            label: '三级 3-2-1'
                        }, {
                            id: 7,
                            label: '三级 3-2-2',
                            disabled: true
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children', // 子节点字段名
                    label: 'label' // 显示文本字段名
                }
            };
        }
    });
</script>
</body>
</html>